import Homeanimate from "@/components/Homeanimate";
import Homepagewrap from "./index.module.less";

import { useCallback, useEffect, useState } from "react";
import { propsinterface } from "./components/essay";
import Mod from "./components/mod";
import Essay from "./components/essay";
import Infinity1 from "@/components/infinity";

import { getallessay, getessayanyway } from "../../apis/essay";
import { getalllabel } from "../../apis/label";
import { useLocation } from "react-router-dom";
import { bygiteeapi } from "@/apis/user";
import { useDispatch } from "react-redux";
import { getcollectidarraction, loginpatch } from "@/store/action/home";
export default function HomePage() {
  const location = useLocation();
  const dispatch = useDispatch<any>();
  //一定数量的博客
  const [allblog, setAllblog] = useState<propsinterface[]>([]);
  //不同形式的博客，如：热度最高，
  const [hotblog, setHotblog] = useState<propsinterface[]>();
  const [newblog, setNewblog] = useState<propsinterface[]>();
  //所有标签
  const [alllabel, setAlllabel] = useState<{ id: number; content: string }[]>(
    []
  );
  //文章数量
  const [count, setCount] = useState(0);

  //是否完成数据的获取
  const [finished, setFinished] = useState<boolean>(false);

  useEffect(() => {
    getessayanyway(2).then((res: any) => {
      setHotblog(res.result);
    });
    getessayanyway(1).then((res: any) => {
      setNewblog(res.result);
    });
    getalllabel().then((res: any) => {
      setAlllabel(res.result);
    });
  }, []);
  //无限懒加载获取文章
  const loaddata = useCallback(function () {
    setCount((c) => c + 3);
  }, []);
  useEffect(() => {
    getallessay(count, 1).then((res: any) => {
      if (res.result.length === 0) return setFinished(true);
      setAllblog((pre) => [...pre, ...res.result]);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [count]);

  //gitee登录时特殊
  useEffect(() => {
    if (!location.search) return;
    let giteeid = location.search.slice(1).split("=")[1];

    bygiteeapi(parseInt(giteeid)).then((res: any) => {
      // console.log(res.result.user);

      dispatch(loginpatch(res.result.user));
      dispatch(getcollectidarraction(res.result.user.id));
    });
  }, [dispatch, location]);
  return (
    <div className={Homepagewrap.homepagewrap}>
      <Homeanimate></Homeanimate>
      <div className="main">
        <div className="content">
          <div className="left">
            <div className="head">
              <span className="title">全部文章</span>
              <span className="right">
                <span className="iconfont icon-kaiguanguan"></span>
                <span>热门</span>
              </span>
            </div>
            {allblog &&
              allblog.map((item, i) => {
                return <Essay oneassy={item} key={i}></Essay>;
              })}
            <Infinity1 loaddata={loaddata} finished={finished}></Infinity1>
          </div>
          <div className="right">
            {/* 标签 */}
            <Mod title="标签" labels={alllabel}></Mod>
            {/* 最新文章 */}
            <Mod title="最新文章" type={0} typeessay={newblog}></Mod>
            {/* 最热文章 */}
            <Mod title="热度文章" type={1} typeessay={hotblog}></Mod>
          </div>
        </div>
      </div>
    </div>
  );
}
